<template>
	<view class="coupon-wrap">
		<Tabs :TabList="tabList" :currentTab="checkedTab" @tabs="tabsChange">
			<TabPane>
				<view class="coupon-body" v-if="state=='all'">
					<view v-for="(item, index) in couponList" :key="index" :class="{'coupon-itme w100 flex-x-between relative': true, 'used': item.state==='used'}">
						<view class="left">
							<view class="money">
								￥<text class="amount">{{item.reduce_quota}}</text>
								<text>满{{item.full_quota}}减{{item.reduce_quota}}</text>
							</view>
							<view class="type">
								店铺优惠券
							</view>
							<view class="date">
								{{item.begin_time}}
								-
								{{item.expire_time}}
							</view>
						</view>
						<view class="right text-center" @click="handleUse(item.shop_id)">
							{{showText(item.state)}}
						</view>
					</view>
					<no-data v-if="!couponList.length" />
				</view>
			</TabPane>
			<TabPane>
				<view class="coupon-body" v-if="state==0">
					<view v-for="(item, index) in couponList" :key="index" :class="{'coupon-itme w100 flex-x-between relative': true, 'used': item.state==='used'}">
						<view class="left">
							<view class="money">
								￥<text class="amount">{{item.reduce_quota}}</text>
								<text>满{{item.full_quota}}减{{item.reduce_quota}}</text>
							</view>
							<view class="type">
								店铺优惠券
							</view>
							<view class="date">
								{{item.begin_time}}
								-
								{{item.expire_time}}
							</view>
						</view>
						<view class="right text-center" @click="handleUse(item.shop_id)">{{showText(item.state)}}</view>
					</view>
					<no-data v-if="!couponList.length" />
				</view>
			</TabPane>
			<TabPane>
				<view class="coupon-body" v-if="state==1">
					<view v-for="(item, index) in couponList" :key="index" :class="{'coupon-itme w100 flex-x-between relative': true, 'used': item.state==='used'}">
						<view class="left">
							<view class="money">
								￥<text class="amount">{{item.reduce_quota}}</text>
								<text>满{{item.full_quota}}减{{item.reduce_quota}}</text>
							</view>
							<view class="type">
								店铺优惠券
							</view>
							<view class="date">
								{{item.begin_time}}
								-
								{{item.expire_time}}
							</view>
						</view>
						<view class="right text-center" @click="handleUse(item.shop_id)">{{showText(item.state)}}</view>
					</view>
					<no-data v-if="!couponList.length" />
				</view>
			</TabPane>
			<TabPane>
				<view class="coupon-body" v-if="state==2">
					<view v-for="(item, index) in couponList" :key="index" :class="{'coupon-itme w100 flex-x-between relative': true, 'used': item.state==='used'}">
						<view class="left">
							<view class="money">
								￥<text class="amount">{{item.reduce_quota}}</text>
								<text>满{{item.full_quota}}减{{item.reduce_quota}}</text>
							</view>
							<view class="type">
								店铺优惠券
							</view>
							<view class="date">
								{{item.begin_time}}
								-
								{{item.expire_time}}
							</view>
						</view>
						<view class="right text-center" @click="handleUse(item.shop_id)">{{showText(item.state)}}</view>
					</view>
					<no-data v-if="!couponList.length" />
				</view>
			</TabPane>
		</Tabs>
	</view>
</template>

<script>
	import Tabs from '../../components/public/tabs.vue'
	import TabPane from '../../components/public/tabPane.vue'
	import {
		getMyCoupon
	} from '../../../apis/personal/index.js'

	export default {
		data() {
			return {
				checkedTab: 0,
				tabList: [{
						title: '全部',
						state: 'all'
					},
					{
						title: '待使用',
						state: 0
					},
					{
						title: '已使用',
						state: 1
					},
					{
						title: '已失效',
						state: 2
					}
				],
				couponList: []
			}
		},
		components: {
			Tabs,
			TabPane,
		},
		onShow() {
			this.getCoupon()
		},
		computed: {
			showText(state) {
				return function(state) {
					let text = ''
					switch (state) {
						case 2:
							text = '已失效'
							break;
						case 1:
							text = '已使用'
							break;
						case 0:
							text = '去使用'
							break;
					}
					return text
				}
			},
			state() {
				let state = 0
				switch (this.checkedTab) {
					case 0:
						state = 'all'
						break;
					case 1:
						state = 0
						break;
					case 2:
						state = 1
						break;
					case 3:
						state = 2
						break;
				}
				return state
			},
		},
		methods: {
			handleUse(store_id) {
				if (store_id == 0) return

				const {
					latitude,
					longitude
				} = uni.getStorageSync('location')

				uni.navigateTo({
					url: `/pages/shop/shopinfo?store_id=${store_id}&latitude=${latitude}&longitude=${longitude}`
				})
			},
			getCoupon() {

				let params = {
					page: 1,
					state: this.state === 'all' ? '' : this.state
				}

				this.$loading.show()
				getMyCoupon(params).then(res => {
					if (+res.code === 200) {
						this.couponList = res.data;
						this.$loading.hide();
					}
				})
			},
			tabsChange(index) {
				this.checkedTab = index
				this.getCoupon()
			},
		}
	}
</script>

<style lang="less">
	.coupon-wrap {

		.coupon-body {
			padding: 40rpx;
			box-sizing: border-box;

			.coupon-itme {
				background: #FFF3F5;
				height: 192rpx;
				margin-bottom: 30rpx;
				font-size: 24rpx;
				padding: 0rpx 40rpx;
				border-radius: 20rpx;
				color: #676767;
				box-sizing: border-box;

				&::after {
					position: absolute;
					top: 0;
					right: 195rpx;
					height: 100%;
					width: 18rpx;
					content: '';
					display: inline-block;
					background: url('/static/images/coupon.png');
					background-size: cover;

				}

				.left {
					.money {
						.amount {
							font-size: 48rpx;
							margin: 10rpx;
						}

						font-size: 26rpx;
						color: #E41906;
						margin-bottom: 15rpx;
						margin-top: -5rpx;
					}

					.date {
						margin-top: 10rpx;
					}
				}

				.right {
					width: 132rpx;
					height: 54rpx;
					background: linear-gradient(90deg, rgba(228, 24, 6, 1) 0%, rgba(253, 109, 96, 1) 100%);
					border-radius: 27rpx;
					line-height: 54rpx;
					color: #ffffff;
				}

				&.used {
					background: #f8f8f8;

					.money {
						color: #666666
					}

					.right {
						background: linear-gradient(90deg, rgba(154, 154, 154, 1) 0%, rgba(204, 204, 204, 1) 100%);
					}
				}
			}
		}
	}
</style>
